<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扫码统计</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
    <link href="<%=path %>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path %>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=path %>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=path %>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
 <style type="text/css">
        body {
            font-size: 14px;
        }

        .dataTables_info {
            font-size: 12px
        }

        .dataTables_paginate {
            font-size: 12px;
        }

        a {
            margin-right: 20px;
            color: black;
        }

        a:last-child {
            margin-right: 0;
        }

        a.cfoucs {
            color: #8BCAB9;
            font-weight: bold;
        }
        .row{
        	height:30px;
        	line-height:30px;
        }
        .s_box_chart{
            width: 300px;
            height: 256px;
            padding: 20px;
            border-radius: 3px;
            float: left;
        }
    </style>
</head>
<body>
	<div class="row">
		<div class="form-group" style="margin-left:10px;margin-top:10px;">		
			<div class="col-sm-4" style="height: 30px;line-height: 30px;">
				<label class="control-label">选择时间：</label>
				<a class="cfoucs" onclick="func_searchDate(0)">今日</a>
				<a onclick="func_searchDate(1)">昨日</a>
				<a onclick="func_searchDate(2)">最近7天</a>
				<a onclick="func_searchDate(3)">最近30天</a>
            </div>
        </div>
	</div>
	  <div class="row">
        	<div class="form-group" style="margin-left:10px;">		
			<div class="col-sm-3" style="height: 30px;line-height: 30px;min-width: 350px;">
				<label class="control-label" style="float:left;">选择日期：</label>
				<div class="input-daterange date input-group" id="datepicker">
					<input type="text" class="input-sm form-control" name="start" value="2018-01-01" id="startDate" style="min-width:100px;">
                    <span class="input-group-addon" style="height: 24px;">到</span>
                    <input type="text" class="input-sm form-control" name="end" value="2018-12-31" id="endDate" style="min-width:100px;">
                </div>
            </div>
            <div class="form-group">
            	<button type="button" class=" btn btn-primary k_verify col-sm-1"id="commit">筛选</button>
            </div>
            <div class="col-sm-6"></div>
            <div class="form-group">
             <shiro:hasPermission name="qrcode_markting_mamage:export">
            	<button type="button" class=" btn btn-outline btn-primary  col-sm-1"id="exportExcel">导出数据</button>
            </shiro:hasPermission>
            </div>
        </div>
       </div>
      
      <div class="gray-bg row" style="height:2px; margin-top: 20px;">     
      </div>
      <div class="row" style="height:80px;">
      	<h2><center style="line-height:80px;">扫码统计</center></h2>
      </div>
      <div class="row" style="width:100%;height:400px;">
      		<div class="col-sm-1"></div>
           <div id="urlBox" class="col-sm-10" style="height: 400px; display:none;"></div>
           <div id="activityBox" class="col-sm-10" style="height: 400px; display:none;" ></div>
      </div>
      <div class="row" style="width:100%;height:80px;">
      	<h2><center style="line-height:80px;">日期详细列表</center></h2>
      </div>
      <div class="row" style="width:80%;">
     	 <div class="col-sm-3"></div>
     	 <div class="col-sm-9" id="urlTable" style="display:none;">
     	 	<table class="table table-bordered" >
      		<thead>
      		<tr>
      			<th>时间</th>
      			<th>扫码次数</th>
      			<th>扫码人数</th>
      		</tr>
      		</thead>
      		<tbody >
      			
      		</tbody>
      	</table>
      	</div>
      	<div class="col-sm-9" id="activityTable" style="display:none;">
      	<table class="table table-bordered" >
      		<thead>
      		<tr>
      			<th>时间</th>
      			<th>扫码次数</th>
      			<th>扫码人数</th>
      			<th>转化数</th>
      			<th>核销数</th>
      		</tr>
      		</thead>
      		<tbody >
      			
      		</tbody>
      	</table>
      	</div>
      </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="<%=basePath%>/hplus/js/plugins/echarts/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var isActivity=null;
$.fn.dataTable.ext.errMode = 'none';
//选中时间的标志 0当天，1昨天，2最近七天，3最近30天
var flag=0;
var startDate=null;
var endDate=null;
var codeId=getQueryString("codeId");
var storeId=getQueryString("storeId");
var codeType=getQueryString("codeType");
	$(function(){
        $(".input-daterange").datepicker({keyboardNavigation: !1, forceParse: !1, autoclose: !0});
		$("a").click(function(){
			$(this).addClass("cfoucs").siblings().removeClass("cfoucs");
		});
		func_isActivity(codeType);
		func_searchDate(0);
	})
	function func_isActivity(data){
		if(data==1){
			isActivity=true;
		}else{
			isActivity=false;
		}
	}
	$("#commit").click(function(){
		func_searchDate(null);
	});
	$("#exportExcel").click(function(){
		var exportUrl=path;
		if(StringEmpty(codeId)){
			exportUrl+="/qrCode/exportQroceStatisticsExcel?id="+codeId+"&startDate="+startDate;
		}else{
			exportUrl+="/qrCode/exportQroceStatisticsExcel?startDate="+startDate;
		}
		exportUrl+="&endDate="+endDate+"&dateFlag="+flag+"&codeType="+codeType;
		if(StringEmpty(storeId)){
			exportUrl+="&storeId="+storeId;
		}
		window.location.href=exportUrl;
	});
	function func_searchDate(data){
		if(data==null){
			flag=-1;
			startDate=$("#startDate").val();
			endDate=$("#endDate").val();
		}else{
			flag=data;
			startDate=null;
			endDate=null;
		}
		search_data();
	}
	var dates=["2016-10","2016-11","2016-12","2017-01","2017-02"];
	var clickData=[100,500,300,200,110];
	var clickMenData=[60,300,120,110,100];
	var changeDatas=[];
	var cancelDatas=[];
	function search_data(){		
		var data_url=null;
		if(isActivity==true){
			$("#activityTable").attr("style","display:block;");
			$("#activityBox").attr("style","height:400px;display:block;");
			data_url=path+"/qrCode/ajaxFindActivityStatistics";
			search_activityData(data_url);
		}else if(isActivity==false){
			$("#urlTable").attr("style","display:block;");
			$("#urlBox").attr("style","height:400px;display:block;");
			data_url=path+"/qrCode/ajaxFindCustomLinksStatistics";			
			search_urlData(data_url);
		}	
	}
	function search_activityData(data){
		dates=[];
		clickData=[];
		clickMenData=[];
		changeDatas=[];
		cancelDatas=[];
		$.ajax({
			url:data,
			type: "POST",
	        async: false,
			data:{
            	"id":codeId,
            	"startDate":startDate,
            	"endDate":endDate,
            	"dateFlag":flag,
            	"storeId":storeId
			},
			success:function(data){
				if(data.status == 200){
					var list=data.data;
					for(var i=0;i<list.length;i++){
						dates[i]=list[i].time;
						clickData[i]=list[i].clickCount;
						clickMenData[i]=list[i].clickMemberCount;
						changeDatas[i]=list[i].changeCount;
						cancelDatas[i]=list[i].cancelCount;
					}
					init_activity_count();
					init_activity_table(list);
				}
			}
		});
	}
	function search_urlData(data){
		dates=[];
		clickData=[];
		clickMenData=[];
		$.ajax({
			url:data,
			type: "POST",
	        async: false,
			data:{
            	"id":codeId,
            	"startDate":startDate,
            	"endDate":endDate,
            	"dateFlag":flag,
            	"storeId":storeId
			},
			success:function(data){
				if(data.status == 200){
					var list=data.data;
					for(var i=0;i<list.length;i++){
						dates[i]=list[i].time;
						clickData[i]=list[i].clickCount;
						clickMenData[i]=list[i].clickMemberCount;
					}
					init_url_count();
					init_url_table(list);
				}
			}
		});
	}
	function init_url_table(data){
		var tbody="";
		for(var i=0;i<data.length;i++){
			tbody+="<tr><td>"+data[i].time+"</td>";
			tbody+="<td>"+data[i].clickCount+"</td>";
			tbody+="<td>"+data[i].clickMemberCount+"</td></tr>";
		}
		$("#urlTable tbody").html(tbody);
	}
	function init_activity_table(data){
		var tbody="";
		for(var i=0;i<data.length;i++){
			tbody+="<tr><td>"+data[i].time+"</td>";
			tbody+="<td>"+data[i].clickCount+"</td>";
			tbody+="<td>"+data[i].clickMemberCount+"</td>";
			tbody+="<td>"+data[i].changeCount+"</td>";
			tbody+="<td>"+data[i].cancelCount+"</td></tr>";
		}
		$("#activityTable tbody").html(tbody);
	}
	function init_url_count(){
		var MyChart = echarts.init(document.getElementById("urlBox"));
		var option = {
				 noDataLoadingOption :{
	                   	text: '暂无数据',				
	                   	effect:'bubble',
	                   	effectOption : {
	                   	effect: {
	                   	n: 0 //气泡个数为0 		
	                   	}
	                    }
	            },
                tooltip : {
                },
                toolbox: {
			        show: true,
			        feature: {
			            dataZoom: {
			                yAxisIndex: 'none'
			            },
			            dataView: {readOnly: false},
			            magicType: {type: ['line', 'bar']},
			            restore: {},
			            saveAsImage: {}
			        }
			    },
                legend: {
                    data:['扫码数','扫码人数']
                },

                calculable : true,


                xAxis : [
                    {
                        
                        axisLine:{
                          lineStyle :{
                              color: '#CECECE'
                          }
                        },
                        type : 'category',
                        boundaryGap : false,
                        data :dates                        
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine:{
                            lineStyle :{
                                color: '#CECECE'
                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'扫码数',
                        type:'line',
                        symbol:'none',
                        smooth: 0.2,
                        color:['#38C7A9'],
                        data:clickData,
                        areaStyle: {
                        normal: {
                        	 color:'#38C7A9',
                          	 opacity: 0.5
                          	 }
                        },
                    },
                    {
                        name:'扫码人数',
                        type:'line',
                        symbol:'none',
                        smooth: 0.2,
                        color:['#96D2C6'],
                        data:clickMenData,
                        areaStyle: {
                            normal: {
                            	 color:'#96D2C6',
                              	 opacity: 0.5
                              	 }
                            },
                    }
                ]
            };
		MyChart.setOption(option);
	}
	function init_activity_count(){
		var MyChart = echarts.init(document.getElementById("activityBox"));
		var option = {
				 noDataLoadingOption :{
	                   	text: '暂无数据',				
	                   	effect:'bubble',
	                   	effectOption : {
	                   	effect: {
	                   	n: 0 //气泡个数为0 		
	                   	}
	                    }
	            },
                tooltip : {
                },
                toolbox: {
			        show: true,
			        feature: {
			            dataZoom: {
			                yAxisIndex: 'none'
			            },
			            dataView: {readOnly: false},
			            magicType: {type: ['line', 'bar']},
			            restore: {},
			            saveAsImage: {}
			        }
			    },
                legend: {
                    data:['扫码数','扫码人数','转化数','核销数']
                },

                calculable : true,


                xAxis : [
                    {
                        
                        axisLine:{
                          lineStyle :{
                              color: '#CECECE'
                          }
                        },
                        type : 'category',
                        boundaryGap : false,
                        data :dates                        
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLine:{
                            lineStyle :{
                                color: '#CECECE'
                            }
                        }
                    }
                ],
                series : [
                    {
                        name:'扫码数',
                        type:'line',
                        symbol:'none',
                        smooth: 0.2,
                        color:['#0A8971'],
                        data:clickData,
                        areaStyle: {
                        normal: {
                        	 color:'#0A8971',
                          	 opacity: 0.5
                          	 }
                        },
                    },
                    {
                        name:'扫码人数',
                        type:'line',
                        symbol:'none',
                        smooth: 0.2,
                        color:['#38C7A9'],
                        data:clickMenData,
                        areaStyle: {
                            normal: {
                            	 color:'#38C7A9',
                              	 opacity: 0.5
                              	 }
                            },
                    },
                    {
                        name:'转化数',
                        type:'line',
                        symbol:'none',
                        smooth: 0.2,
                        color:['#8CD1C1'],
                        data:changeDatas,
                        areaStyle: {
                            normal: {
                            	 color:'#8CD1C1',
                              	 opacity: 0.5
                              	 }
                            },
                    },
                    {
                        name:'核销数',
                        type:'line',
                        symbol:'none',
                        smooth: 0.2,
                        color:['#D1F7F0'],
                        data:cancelDatas,
                        areaStyle: {
                            normal: {
                            	 color:'#D1F7F0',
                              	 opacity: 0.5
                              	 }
                            },
                    }
                ]
            };
		MyChart.setOption(option);
	}
	//自定义弹框
  	function func_artdialog(name,value){
 		var d = dialog({
 			title: name,
 			fixed: true,
 			width: 200,
 	        height:100,
 			content:"<center style='font-size:20px; line-height:100px;'>"+value+"</center>",
 			okValue: "确定",
 			ok: function () {
 				return true;
 			}
 		});
 		d.show();
 	}
  //判断字符串是否为空
    function StringEmpty(content) {
        if (content == undefined || content == "" || content == null) {
            return false;
        } else {
            return true;
        }
    }
</script>
</html>
